<template>
    <div class="flow-icon-box" :style="boxStyle">
        <img :src="ICON_BASE_URL + realIcon" :style="boxStyle" />
    </div>
</template>

<script setup>
import useApp from '@/hooks';
import { computed } from 'vue';
const { $ } = useApp();
const ICON_BASE_URL = ref("http://icon.apisev.cn/")

let props = defineProps({
    icon: {
        type: String,
        default: null,
    },
    size: {
        type: Number,
        default: 48,
    },
});

let boxStyle = computed(() => {
    return {
        width: props.size + "px",
        height: props.size + "px",
    };
});
const realIcon = computed(() => {
    if ($.isEmpty(props.icon)) {
        return "nepu.png"
    } else {
        return props.icon;
    }
})
</script>

<style lang="less">
.flow-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20%;
    overflow: hidden;
    flex-shrink: 0;
}
</style>